FormAttachments
- Properties
- Example
- Source Code
- Accessibility
Name | Type | Default Value | Required | Description |
---|---|---|---|---|
removeOnPress | (attachment: any) => void | No | callback called on click of remove link for an attachment | |
buttonLabel | string | No | button label | |
buttonPress | () => void | No | button onPress | |
testID | string | No | optional TestID | |
attachmentsList | any[] | No | list of current attachments |
How to use the FormAttachments component
<FormAttachments
attachmentsList={[ { name: 'file.txt' }, { fileName: 'image.jpeg' } ]}
removeOnPress={() => {}}
largeButtonProps={{ label: 'add files', onPress: () => {} }} />
Full code for the FormAttachments component
import React, { FC, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import { ImagePickerResponse } from 'react-native-image-picker/src/types'
import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
import _ from 'underscore'
import { Box, TextView, VAIcon } from 'components/index'
import { NAMESPACE } from 'constants/namespaces'
import { DocumentPickerResponse } from 'screens/BenefitsScreen/BenefitsStackScreens'
import { getFileDisplay } from 'utils/common'
import { useTheme } from 'utils/hooks'
export type FormAttachmentsProps = {
/** callback called on click of remove link for an attachment */
removeOnPress?: (attachment: ImagePickerResponse | DocumentPickerResponse) => void
/**button label */
buttonLabel?: string
/**button onPress */
buttonPress?: () => void
/** optional TestID */
testID?: string
/** list of current attachments */
attachmentsList?: Array<ImagePickerResponse | DocumentPickerResponse>
}
/** A common component for form attachments, displays Attachments heading with helper link,
* already attached items with remove option, and an optional large button. */
const FormAttachments: FC<FormAttachmentsProps> = ({
removeOnPress,
buttonLabel,
buttonPress,
testID,
attachmentsList,
}) => {
const theme = useTheme()
const { t } = useTranslation(NAMESPACE.COMMON)
const { t: tFunction } = useTranslation()
const renderFileNames = (): ReactNode => {
return _.map(attachmentsList || [], (attachment, index) => {
const { fileName, fileSize: formattedFileSize, fileSizeA11y } = getFileDisplay(attachment, tFunction, true)
const text = [fileName, formattedFileSize].join(' ').trim()
return (
<Box key={index}>
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
flexWrap="wrap"
mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0}>
<Box display="flex" flexDirection="row" alignItems="center" flexWrap="wrap" justifyContent="space-between">
<VAIcon name="PaperClip" width={16} height={16} fill="spinner" />
<TextView
variant="MobileBodyBold"
ml={theme.dimensions.textIconMargin}
accessibilityLabel={fileSizeA11y ? [fileName, fileSizeA11y].join(' ').trim() : undefined}>
{text}
</TextView>
</Box>
</Box>
<Button
onPress={() => removeOnPress?.(attachment)}
label={t('remove')}
a11yHint={t('remove.a11yHint', { content: fileName })}
buttonType={ButtonVariants.Destructive}
testID={testID}
/>
</Box>
)
})
}
const attachmentsDoNotExist = !attachmentsList || attachmentsList.length === 0
return (
<Box>
<TextView>{t('attachments')}</TextView>
<Box
mt={theme.dimensions.standardMarginBetween}
mb={attachmentsDoNotExist ? 0 : theme.dimensions.standardMarginBetween}>
{renderFileNames()}
</Box>
{buttonLabel && buttonPress && (
<Button
label={buttonLabel}
onPress={buttonPress}
buttonType={ButtonVariants.Secondary}
a11yLabel={buttonLabel}
testID={testID}
/>
)}
</Box>
)
}
export default FormAttachments